import { defineComponent } from 'vue';
import { itemAggregate } from '@/api/home';
import SheltV2 from '../../common/SheltV2';
import Echarts from '@/components/Echarts';
import './index.less';
import { ElDatePicker, ElOption, ElSelect } from 'element-plus';
import ItemTable from '../MyItem/ItemTable';

export default defineComponent({
  name: 'GroupItem',
  setup() {
    const itemTableRef = ref();
    const echartsRef = ref();
    const data = ref({}) as AnyObject;
    const searchParams = reactive({
      pro_type: '',
      organize: '',
      date: '',
      is_company: 1
    }) as AnyObject;
    const detailSlots = ref({
      detail: () => {
        return (
          <div class="item_right">
            <ElSelect
              v-model={searchParams.pro_type}
              clearable
              onChange={handleSelect}
              placeholder="项目类型"
            >
              {data.value.pro_type?.map((_name: string, _index: number) => (
                <ElOption key={_index} label={_name} value={_name}></ElOption>
              ))}
            </ElSelect>
            <ElSelect
              v-model={searchParams.organize}
              clearable
              onChange={handleSelect}
              placeholder="组织类型"
            >
              {data.value.organize_type?.map(
                (_name: string, _index: number) => (
                  <ElOption key={_index} label={_name} value={_name}></ElOption>
                )
              )}
            </ElSelect>
            <ElDatePicker
              v-model={searchParams.date}
              type="month"
              class="month_selector"
              range-separator="/"
              clearable
              placeholder="请选择"
              // @ts-ignore
              onChange={handleSelect}
            />
          </div>
        );
      }
    });
    const option = ref({
      tooltip: {
        trigger: 'item'
      },
      color: [
        '#3bc27f',
        '#4a74ea',
        '#eb7b3b',
        '#eb7b3b',
        '#3bc27f',
        '#eb7b3b',
        '#4a74ea',
        '#ffc824',
        '#d46f35'
      ],
      title: [
        {
          subtext: '所有项目',
          top: '42%',
          left: '16.5%',
          itemGap: 5,
          textAlign: 'center',
          triggerEvent: true
        },
        {
          subtext: '进行中',
          top: '42%',
          left: '40.3%',
          itemGap: 5,
          textAlign: 'center',
          triggerEvent: true
        },
        {
          subtext: '已完成',
          top: '42%',
          left: '65.5%',
          itemGap: 5,
          textAlign: 'center',
          triggerEvent: true
        },
        {
          subtext: '是否规范\n按时完成',
          top: '39%',
          left: '87.5%',
          itemGap: 5,
          textAlign: 'center',
          triggerEvent: true
        }
      ],
      legend: {
        show: false
      },
      label: {
        formatter: '{name|{c}}({d}%)\n{b}',
        textAlign: 'left',
        rich: {
          name: {
            fontSize: 16,
            fontWeight: 'bold',
            padding: [5, 0]
          }
        }
      },
      media: [
        {
          option: {
            series: [
              {
                labelLine: { lengh: 0, length2: 5 },
                avoidLabelOverlap: false,
                startAngle: -10,
                type: 'pie',
                name: '所有项目',
                center: ['17%', '50%'],
                radius: ['30%', '40%']
              },
              {
                labelLine: { lengh: 0, length2: 5 },
                type: 'pie',
                name: '进行中',
                center: ['41%', '50%'],
                radius: ['23%', '30%']
              },
              {
                labelLine: { lengh: 0, length2: 5 },
                type: 'pie',
                name: '已完成',
                center: ['66%', '50%'],
                radius: ['23%', '30%']
              },
              {
                startAngle: 240,
                labelLine: { lengh: 0, length2: 5 },
                type: 'pie',
                name: '是否规范按时完成',
                center: ['88%', '50%'],
                radius: ['23%', '30%']
              }
            ]
          }
        }
      ]
    }) as AnyObject;
    const handleSelect = (val: string) => {
      let date = searchParams.date as any;
      if (searchParams.date) {
        const month = ('' + (searchParams.date.getMonth() + 1)).padStart(
          2,
          '0'
        );
        const year = searchParams.date.getFullYear();
        date = year + '-' + month;
      } else {
        date = null;
      }
      handleItemAggregate({
        type: searchParams.pro_type,
        organize: searchParams.organize,
        month: date
      });
    };

    const viewDetail = (type?: number | null) => {
      searchParams.type = type;
      itemTableRef.value.dialogVisible = true;
      console.log('chakan');
    };
    handleItemAggregate();
    function handleItemAggregate(params = {}) {
      itemAggregate(params).then((res) => {
        console.log('vcvcbcvb', res);

        option.value.media[0].option.series[0].data =
          res.data.data_total_project.list;
        option.value.title[0].text = res.data.data_total_project.total;
        option.value.media[0].option.series[1].data =
          res.data.data_progress.list;
        option.value.title[1].text = res.data.data_progress.total;
        option.value.media[0].option.series[2].data = res.data.data_finish.list;
        option.value.title[2].text = res.data.data_finish.total;
        option.value.media[0].option.series[3].data = res.data.data_normal.list;
        option.value.title[3].text = res.data.data_normal.total;
        const { pro_type, organize_type } = res.data;
        data.value = { pro_type, organize_type };
        Object.assign(searchParams, {
          project: pro_type,
          group: organize_type
        });
        // option.value.legend.formatter = (name: string) => {
        //     const findItem = data.value.list?.find((_item: AnyObject) => _item.name === name);
        //     return name + `{a|${findItem?.value || ''}}`;
        // }
        // data.value = res.data;
        console.log(echartsRef.value?.chartInstance);

        echartsRef.value?.chartInstance.on('click', (e: AnyObject) => {
          console.log(e, e.componentType);
          if (e.componentType === 'title') {
            const _type = [0, 6, 7, 7];
            viewDetail(_type[e.componentIndex]);
          }
        });
      });
    }
    return () => (
      <SheltV2
        title="项目汇总"
        more="查看详情"
        onViewDetail={viewDetail}
        v-slots={detailSlots.value}
        question="<div><p>【该数据每日02:00更新一次】</p><p>项目汇总数据来源于BI，展示全体研发的项目数据。</p></div>"
      >
        <Echarts
          ref={echartsRef}
          aspectRatio="3/1"
          option={option.value}
        />
        <div class="item_title">(统计时间08/01之后)</div>
        <ItemTable ref={itemTableRef} params={searchParams} />
      </SheltV2>
    );
  }
});
